<template>
  <TextSetting class="fa-option-setting" :data="data" :disabled="disabled">
    <ElFormItem prop="checkOptions" :rules="rules">
      <template #label>
        <span class="fa-option-setting__label">
          选项设置 <span class="count">({{ options.length }})</span>
        </span>

        <a v-if="!disabled" class="fa-widget-link" @click="optionsEdit.visible = true">批量操作</a>

        <OptionsEdit
          v-if="optionsEdit.visible"
          :data="data"
          :options="optionsEdit.options"
          @close="optionsEdit.visible = false"
          @success="optionsEdit.import"
        />
      </template>

      <DragSort
        :key="dnsKey.value"
        class="fa-widget-setting__option-list group-options"
        :list="options"
        :disabled="disabled"
        handle
      >
        <DragSortItem
          v-for="(item, index) in options"
          :key="item.id"
          :index="index"
          class="group-option"
          :class="{ 'is-active': activeIndex === index }"
        >
          <ElInput
            class="group-option__input"
            v-model="item.label"
            clearable
            placeholder="请输入选项值"
            :maxlength="maxLength"
            :disabled="disabled"
            @change="change(index)"
            @focus="activeIndex = index"
            @blur="
              () => {
                activeIndex = -1
                item.label = item.label.trim()
              }
            "
          />

          <a v-if="removable" class="group-setting-btn fa-icon-delete" @click="remove(index)"></a>
        </DragSortItem>
      </DragSort>

      <ElTooltip
        v-if="addButton.visible"
        :content="addButton.disabledTips"
        :disabled="!addButton.disabledTips"
        placement="top"
      >
        <a class="add-button el-icon-plus" :class="{ 'is-disabled': !!addButton.disabledTips }" @click="add()"></a>
      </ElTooltip>
    </ElFormItem>
  </TextSetting>
</template>

<script lang="ts">
import { defineComponent, toRef, toRefs } from 'vue'
import { Widget } from '@/models'
import { useComponentKey } from '@/utils'
import useSelectOptions from './useSelectOptions'
import useOptionsEdit from '../checkbox-group/useOptionsEdit'

import TextSetting from '../input/TextSetting.vue'
import OptionsEdit from '../checkbox-group/OptionsEdit.vue'
import DragSort from '@/components/drag-sort/DragSort.vue'
import DragSortItem from '@/components/drag-sort/DragSortItem.vue'

/** 下拉选择控件 设置 */
export default defineComponent({
  name: 'FaSelectSetting',
  components: { TextSetting, OptionsEdit, DragSort, DragSortItem },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 是否禁用 */
    disabled: {
      type: Boolean,
      default: false
    }
  },

  setup(props) {
    /** 控件数据 */
    const data = toRef(props, 'data')

    const selectOptions = useSelectOptions(data)

    /** 排序组件 key */
    const dnsKey = useComponentKey()

    /** 选项编辑 */
    const optionsEdit = useOptionsEdit({
      getOptions: () => selectOptions.options.map(o => o.label),

      callback: options => {
        props.data.selectOptions = options
        selectOptions.init()
        dnsKey.update()
      }
    })

    return {
      ...toRefs(selectOptions),

      /** 排序组件 key */
      dnsKey,

      /** 选项编辑 */
      optionsEdit,

      /** 校验规则 */
      rules: [
        {
          validator(rule: object, value: string | number, callback: (e?: Error) => void) {
            if (props.data.selectOptions.some(option => !option)) {
              return callback(new Error('请输入选项值'))
            }

            callback()
          },

          trigger: 'blur'
        }
      ]
    }
  }
})
</script>
